<template>
	<view>
		<view id="page_content">
			<tui-drawer mode="right" :visible="isopen">
				<headNav @close="closeOpen" @showTips="showTips"></headNav>
			</tui-drawer>
			<view class="page trade_history_page table_page">
				<view class="page_header commom_header_share1">
					<view class="back_btn" @click="goBack"></view>
					<view class="header_center">
						<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>
						<view class="golden-title"><text class="font-46">{{$t('Revenue-Report')}}</text></view>
						
					</view><button class="menu_btn" @click="navs('showLeft')">
						<image src="/static/images/entryscreen/menu.svg" mode="widthFix">
					</button>
				</view>
				<view class="table_header mobile-view">
					<view class="th sortable date sorter desc">{{$t('dates')}}</view>
					
					<view class="th sortable pool">{{$t('money')}}</view>
					<view class="th sortable pool">{{$t('types')}}</view>
					<view class="th sortable investment">{{$t('details')}}</view>
					
				</view>
				<view class="trade_history_list ">
					<view class="tui-tool" v-for="(item,index) in recordsList" :key="index">
<view class="tui-tool-item">{{item['create_time']}}</view>
						<view class="tui-tool-item">{{item['number']}}</view>
						<view class="tui-tool-item">{{item['account_type']}}</view>
						<view class="tui-tool-item">{{item['text']}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享弹出内容 -->
		<view class="popups_container" v-if="showLink">
			<view class="popup">
				<view class="close" @click="closeLink"></view>
				<!-- <view class="content"> -->
				<view class="new_campaign_form">
					<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header" mode="widthFix">
						<view class="input_label">我的代理会员链接昵称</view>
						<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
								v-model="shareCode"></view>
						<view class="input_instruct">6 ~ 15个字符，只允许使用英文字母和数字。</view>
						<view class="gold_btn" @click="toShare()">创建链接</view>
				</view>
				<!-- </view> -->
			</view>
		</view>
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop" @showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch"  backdropFilter :backgroundColor="backgroundColor" :tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>
	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components:{
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				recordsList:'',
				loadding: false,
				open_wallet:false,
				pullUpOn:true,
				showTabbar:true,
				current: 2,
				page:1,
				backgroundColor: '#191c1d',
				tabBar: [
					{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',
						
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
			};
		},
		onLoad() {
			if (this.tui.isLogin()) {
				this.hasToken=true;
				this.init();
			}
			
		},
		methods: {
			tabbarSwitch(e) {
				
				this.current = e.index;
				
			},
			init(){
				let datas = {
					// token: token,
					address: '',
					page: 1,
					size: 20,
					account_type:2,
				};
				let result = this.tui.request('api/user/bill', 'post', datas, 1000, 1, '', 'bill');
				Promise.resolve(result).then((value) => {
					
					if (value.code == 200) {
						if(value.data.data){
							 this.page++;
							 this.recordsList=value.data.data
						}
				      
					} else {
						this.tui.toast(value.message);
					}
				})
			},
			navs() {
				this.isopen = true
				this.showTabbar=false
			},
			closeOpen() {
				
				this.isopen = false
			},
			openShare(){
				this.showLink=true;
			},
			goBack() {
				uni.navigateBack()
			},
			closeLink(){
				this.showLink=false;
			},
			openModel(){
			   	this.open_wallet=true;
			},
			closePop(){
				this.open_wallet=false;
				this.showTabbar=true
			},
			showTips: function(msg,type) {
				
				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
		},
		onReachBottom() {
			// if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let datas={
				page: this.page,
				size: 20,
				account_type:2,
			};
			let accoutList=this.tui.request('api/user/bill','post',datas,1000,1,'','bill');
			Promise.resolve(accoutList).then((value)=>{
			   if(value.code==200){
				   if(value.data.data){
					   this.recordsList=this.recordsList.concat(value.data.data);
					   this.page++;
				   }
				    
			   }else{
			   	    this.tui.toast(value.message);
			   }
			})
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		// background: #000;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}

	.trade_history_list {
		background-color: #0c0d13;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		// width: 100%;
		// margin-top: 12rpx;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		z-index: 2
	}

	.tui-tool {
		display: flex;
		flex-direction: row;
	}

	.tui-tool-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 15rpx;
		font-size: 24rpx;
		color: #f4d56f;
	}
</style>